<template>
  <div class="home">
    <!-- 使用topology组件 -->
    <topology class="topology_div" :configs="topologyConfigs" ref="eqweweqweqwe" />
  </div>
</template>

<script>
// 导入topology-vue组件
import topology from "topology-vue";
// 需要导入topology-vue.css
import "topology-vue/topology-vue.css";
import projectDocApi from '@/api/projectDocApi'

export default {
  name: "modelingIndex",
  components: {
    topology,
  },
  data: function () {
    return {
      preDate: new Date().valueOf(),
      intervalId: undefined,
      itemData: null,
      projectId: this.$route.params.id,
      topologyConfigs: {},
      topologyConfigs1: {
        // logo: {
        //   img: "http://topology.le5le.com/assets/img/favicon.ico",
        //   url: "http://topology.le5le.com",
        //   target: "_blank",
        // },
        menus: [
          {
            name: "文件",
            children: [
              { name: "新建文件", keyboard: "Ctrl+N", action: "open" },
              { name: "打开文件", keyboard: "Ctrl+O", action: "loadNew" },
              { name: "导入文件", keyboard: "Ctrl+I", action: "load" },
              {},
              { name: "保存", keyboard: "Ctrl+S", action: "save" },
              // { name: "另存为", keyboard: "Ctrl+Shift+I", action: "saveAs" },
              { name: "下载JSON文件", action: "downloadJson" },
              { name: "下载zip打包文件", action: "downloadZip" },
              {},
              { name: "导出为HTML", action: "downloadHtml" },
              {},
              { name: "下载为PNG", action: "downloadPng" },
              { name: "下载为SVG", action: "downloadSvg" },
            ],
          },
          {
            name: "编辑",
            children: [
              { name: "撤销", keyboard: "Ctrl+Z", action: "undo" },
              { name: "恢复  ", keyboard: "Ctrl+Shift+Z", action: "redo" },
              {},
              { name: "剪切  ", keyboard: "Ctrl+X", action: "cut" },
              { name: "复制  ", keyboard: "Ctrl+C", action: "copy" },
              { name: "粘贴  ", keyboard: "Ctrl+V", action: "paste" },
            ],
          },
          // {
          //   name: "返回",
          //   router: `/view/project/modelMain/${this.itemData.Projectid}`,
          // }
        ],
        // loginUrl: "https://account.le5le.com",
        // signupUrl: "https://account.le5le.com",
      },
    }
  },
  deactivated() {
    clearInterval(this.intervalId)
  },
  destroyed() {
    clearInterval(this.intervalId)
  },
  mounted() {
    let a = this.$refs.eqweweqweqwe.$el.getElementsByClassName('menus')[0]
    a.style.display = 'none'
    this.getDataById()
    // 添加节点
    window.topology.on('addNode', (e) => {
      console.log('添加节点')
      that.updateData()
    });
    // 添加连线
    window.topology.on('addLine', (e) => {
      console.log('添加连线')
      that.updateData()
    });
    // 删除节点
    window.topology.on('delete', (e) => {
      console.log('删除节点')
      that.updateData()
    });
    // 移动节点
    window.topology.on('move', (e) => {
      console.log('移动节点')
      that.updateData()
    });
    // 画笔大小改变
    window.topology.on('resizePens', (e) => {
      console.log('画笔大小改变')
      that.updateData()
    });
    // 画笔被旋转
    window.topology.on('rotated', (e) => {
      console.log('画笔被旋转')
      that.updateData()
    });
    // 画笔大小改变
    window.topology.on('resizePens', (e) => {
      console.log('画笔大小改变')
      that.updateData()
    });
    // 缩放画布
    // window.topology.on('scale', (e) => {
    //   console.log('缩放画布')
    //   that.updateData()
    // });


    let that = this
    document.onkeydown=function (e) {
      event = event || window.event
      let currKey
      e = e || event || window.event
      currKey = e.keyCode||e.which||e.charCode;
      //检测按下哪个键，作相应处理
      if((e.ctrlKey||e.metaKey) && currKey === 83){
        e.preventDefault()
        that.updateData()
        return false
      }else{
        return true
      }

    };
  },
  methods: {
    // 获取json数据
    getJSon () {
      this.itemData.Content = JSON.stringify(window.topology.pureData())
    },
    // 初始化菜单
    initMenus () {
      let a = this.$refs.eqweweqweqwe.$el.getElementsByClassName('menus')[0]
      a.style.display = 'none'
      setTimeout(() => {
        a.style.display = 'flex'
        a.removeChild(a.childNodes[0])
        if (this.topologyConfigs.menus.some(it => it.name === '返回')) {
          a.childNodes[3].style.display = 'none'
          a.childNodes[4].style.display = 'none'
          a.childNodes[5].style.display = 'none'
        }

        a.childNodes[a.childNodes.length - 2].style.display = 'none'
        a.childNodes[a.childNodes.length - 3].style.display = 'none'
      }, 1000)
    },
    getDataById () {
      let a = {
        id: this.projectId
      }
      projectDocApi.getDataById(a).then(res => {
        console.log(res)
        if (res) {
          this.itemData = res
          console.log(this.topologyConfigs1.menus.some(it => it.name === '返回'))
          if (!this.topologyConfigs1.menus.some(it => it.name === '返回')) {
            this.topologyConfigs1.menus.push({
              name: "返回",
              router: `/view/project/modelMain/${this.itemData.Projectid}`,
            })
          }
          this.topologyConfigs = this.topologyConfigs1
          try {
            window.topology.open(JSON.parse(this.itemData.Content))
          } catch (e) {}
          this.initMenus()
        }
      })
    },
    updateData () {
      if ((new Date().valueOf()) - this.preDate > 1000) {
        this.preDate = new Date().valueOf()
        this.getJSon()
        projectDocApi.saveById(this.itemData).then(res => {
          console.log(res)
        })
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import url('//at.alicdn.com/t/font_830376_qzecyukz0s.css');
@import url('//at.alicdn.com/t/font_2030495_pwo1zu1ka1.css');
@import url('//at.alicdn.com/t/font_1331132_qhyav2o6mp.css');
//.home {
//  height: 100vh;
//}
.topology_div .menus {
  min-height: 40px;
}
.topology_div .editor .materials .more-graphical {
  display: none;
}
</style>